<template>
  <div class="header">
    <div class="contirner">
      <div @click="$router.push('/')" class="left-img">

      </div>
      <div class="right-list">
<!--        <div class="demo-tabs">-->
<!--        <span>-->
<!--          &lt;!&ndash; <el-link href="https://www.xinshuishi.net/" type="primary" >薪税师</el-link> &ndash;&gt;-->
<!--          <li><a href="https://www.xinshuishi.net/" target="_blank">薪税师官网</a></li>-->
<!--        </span>-->
<!--          <span>-->
<!--          &lt;!&ndash; <el-link>国际薪税师</el-link> &ndash;&gt;-->
<!--          <li><a href="https://www.pta-athe.com/" target="_blank">国际薪税师官网</a></li>-->
<!--        </span>-->
<!--          <span>-->
<!--          &lt;!&ndash; <el-link>薪酬管理职业技能等级考试</el-link> &ndash;&gt;-->
<!--          <li><a href="https://www.ptaedu.cn/" target="_blank">薪酬管理职业技能等级证书官网</a></li>-->
<!--        </span>-->
<!--          <span>-->
<!--          &lt;!&ndash; <el-link>薪酬管理职业技能等级考试</el-link> &ndash;&gt;-->
<!--          <li><a href="https://pta.cgcc.org.cn/" target="_blank">薪酬管理师官网</a></li>-->
<!--        </span>-->
<!--          <span>-->
<!--          &lt;!&ndash; <el-link>财才网</el-link> &ndash;&gt;-->
<!--          <li><a href="http://www.chinarencai.net/" target="_blank">财才网官网</a></li>-->
<!--        </span>-->
<!--        </div>-->
        <!--      <el-tabs v-model="$route.path" class="demo-tabs" @tab-click="handleClick">-->
        <!--        <el-tab-pane label="薪税师" name="/index"></el-tab-pane>-->
        <!--        <el-tab-pane label="国际薪税师" name="/MyCourse"></el-tab-pane>-->
        <!--        <el-tab-pane label="薪酬管理职业技能等级考试" name="/MyQuestionBank"></el-tab-pane>-->
        <!--        <el-tab-pane label="财才网" name="/TrainingPlatform"></el-tab-pane>-->
        <!--      </el-tabs>-->
        <el-dropdown class="person" trigger="click">
          <span class="el-dropdown-link">
            <el-avatar :size="30" :src="userInfo.avatarPic" />
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <div v-if="userInfo">
              <!--            {{userInfo}}-->
              <el-row>
                <el-col>
                  <div style="display: flex;border-bottom: 1px solid rgba(230, 230, 230, 1);padding: 10px;cursor: pointer">
                    <el-avatar :size="87" :src="userInfo.avatarPic" />
                    <div style="margin-left: 20px;display: flex;flex-direction: column;justify-content: space-around" @click="toPersonCenter">
                      <div style="display: flex;align-items: center">
                        <img width="20" :src="userInfo.sex == 1 ? 'https://img.js.design/assets/img/628371f519215211cb5e5121.png':'https://img.js.design/assets/img/628371f5fb452e47a352da5a.png'" alt="">&nbsp;&nbsp;
                        <p class="name">{{userInfo.nickname}}</p>
                      </div>
                      <p class="other" v-if="userInfo.phone">手机号码：{{ userInfo.phone.substr(0,3)}}****{{ userInfo.phone.substr(userInfo.phone.length - 3)}}</p>
                      <p class="other" v-if="userInfo.userSchools">账户有效期：{{proxy.$filters.dateTimeFormat(userInfo.userSchools[0].expireTime).substr(0,10)}}</p>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <div class="person-choise">
                    <div class="person-item" @click="toMyCourse">
                      <div style="width: 50px;height: 50px;">
                        <img src="../assets/index/person/mycourse.png" alt="">
                      </div>
                      <div class="person-item-span">
                        我的课程
                      </div>
                    </div>
                    <div class="person-item" @click="toMyQuestion">
                      <div style="width: 50px;height: 50px;">
                        <img src="../assets/index/person/myquestion.png" alt="">
                      </div>
                      <div class="person-item-span">
                        我的题库
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <!--                <el-col>-->
                <!--                  <div class="person-choise">-->
                <!--                    <div class="person-item">-->
                <!--                      <div style="width: 50px;height: 50px;">-->
                <!--                        <img src="../assets/index/person/answer.png" alt="">-->
                <!--                      </div>-->
                <!--                      <div class="person-item-span">-->
                <!--                        答疑版-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                    <div class="person-item">-->
                <!--                      <div style="width: 50px;height: 50px;">-->
                <!--                        <img src="../assets/index/person/person.png" alt="">-->
                <!--                      </div>-->
                <!--                      <div class="person-item-span">-->
                <!--                        人工客服-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </el-col>-->
                <el-col>
                  <div style="display: flex;justify-content: flex-end;width: 100%">
                    <div class="close" @click="close">安全退出</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

</template>

<script>
  import Cookies from 'js-cookie'
  import {ref,toRefs,reactive,getCurrentInstance} from "vue";
  import {useRouter,useRoute} from "vue-router";
  import {userInfo} from "../api/api";

  export default {
    name: "Header",
    setup(){
      const value = ref('')
      const { proxy } = getCurrentInstance()
      const options = [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ]

      let data = reactive({
        userInfo:{}
      })

      //退出
      let close = () =>{
        Cookies.remove('token');
        window.location.reload();
      }

      //个人资料
      let getUserInfo = () =>{
        userInfo().then(res =>{
          console.log('个人资料',res)
          data.userInfo = res.data;
          window.localStorage.setItem('phone',res.data.phone)
          window.localStorage.setItem('nickname',res.data.userImID)
          window.localStorage.setItem('name',res.data.fullName)
          window.localStorage.setItem('sex',res.data.sex);
          window.localStorage.setItem('userImid',res.data.userImID)
          window.localStorage.setItem('userName',res.data.nickname)
          window.localStorage.setItem('avatarPic',res.data.avatarPic)
        })
      }
      getUserInfo();

      const activeName = ref('first')
      let $router = useRouter();
      const handleClick = (tab, event) => {
        // console.log(tab.props.name, event)
        $router.push({path:tab.props.name})
      }

      const toPersonCenter = () =>{
        $router.push('/personCenter')
      }

      let toMyCourse = () =>{
        $router.push({name: 'MyCourseAccount'})
      }
      let toMyQuestion = () =>{
        $router.push({path:'/AccountList'})
      }
      return{
        toMyCourse,
        toMyQuestion,
        proxy,
        close,
        ...toRefs(data),
        toPersonCenter,
        activeName,
        value,
        options,
        handleClick
      }
    }
  }
</script>

<style>
  .right-list .el-tabs__nav-wrap::after{
    height: 0px;
  }
  .right-list .el-tabs--top{
    line-height: 4.6875rem;
  }
</style>

<style scoped>
  .other{
    color: rgba(90, 90, 90, 1);
    font-size: 14px;
    font-weight: 400;
  }
  .name{
    color: rgba(0, 11, 51, 1);
    font-size: 16px;
    font-weight: 400;
  }
  .demo-tabs{
    display: flex;
    align-items: center;
  }
  .demo-tabs span{
    margin-right: 30px;
  }
  .close{
    color: rgba(128, 128, 128, 1);
    font-size: 12px;
    padding-bottom: 10px;
    padding-right: 20px;
    cursor: pointer;
  }
  .person-item-span{
    margin-left: 12px;
  }
  .el-dropdown-link{
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .person-choise{
    display: flex;
    justify-content: space-around;
    padding: 15px;
  }
  .person-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .person{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
  }
  .right-list{
    display: flex;
  }
  .right-list a{
    text-decoration: none;
    color:black
  }
  .header{
    width: 100%;
    background-color: white;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  }
  .header .contirner{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0px;
  }
  .left-img{
    cursor: pointer;
    width: 15.625rem;
    height: 3.9375rem;
    background-size: contain;
    background-image: url("https://img.js.design/assets/img/624d091f429c3e31fa0f330c.png");
  }



</style>
